<template >
  <div style="border-top: 1px solid #eee">
    <!-- //模块 -->
    <div
      class="footer_model"
      :style="
        $store.getters.screenWidth ? 'flex-direction: column;padding:20px' : ''
      "
    >
      <span
        style="display: flex; justify-content: space-around"
        v-if="$store.getters.screenWidth"
      >
        <div v-for="(item, index) in project_list" :key="index">
          <router-link :to="item.title.link">
          <p class="p_text" style="font-size: 16px;color:#000">{{ item.title.name }}</p>
        </router-link>

        <p class="p_text" v-for="(item1, index) in item.product" :key="index">
          <router-link :to="item1.link">
            <span class="pp_text" style="color:#000">
              {{ item1.name }}
            </span>
          </router-link>
        </p>
        </div>
      </span>
      <div v-else v-for="(item, index) in project_list" :key="index">
        <router-link :to="item.title.link">
          <p class="p_text" style="font-size: 16px;color:#000">{{ item.title.name }}</p>
        </router-link>

        <p class="p_text" v-for="(item1, index) in item.product" :key="index">
          <router-link :to="item1.link">
            <span class="pp_text" style="color:#000">
              {{ item1.name }}
            </span>
          </router-link>
        </p>
      </div>
      <div style="margin-top: 10px">
        <div style="color: #62a8ea; font-size: 26px">
          {{ companyInfo.telphone }}
        </div>
        <p class="p_text" style="margin-bottom:10px">周一至周五 08:30~17:30</p>
        <div style="display: flex; justify-content: center">
          <el-popover
            trigger="hover"
            placement="top"
            v-model="visible"
            style="padding:0"
          >
            <div style="width: 150px;height:150px;display: flex; justify-content: cneter;padding:0">
              <img
                style="width: 100%; height: 100%"
                :src="companyInfo.wxImg"
                alt
              />
            </div>

            <img
              slot="reference"
              style="width: 30px; margin-right: 20px"
              :src="require('../assets/wechat.png')"
              alt
            />
          </el-popover>
          <el-popover
            trigger="hover"
            placement="top"
            width="80"
            v-model="visibleQq"
          >
            <div style="width: 100%; display: flex; justify-content: cneter">
              <img
                style="width: 100%; height: 100px"
                :src="companyInfo.qqImg"
                alt
              />
            </div>

            <img
              slot="reference"
              style="width: 30px"
              :src="require('../assets/qq.png')"
              alt
            />
          </el-popover>
        </div>
      </div>
    </div>
    <!-- 政策 -->
    <div class="footer">
      <div class="text_style">合肥兰舟智能科技公司 版权所有 2016-2021 <span style="color:#62a8ea" @click="toNewUrl">皖ICP备19011591号</span> </div>
      <!-- https://www.miit.gov.cn/ -->
      <!-- <div
        class="text_style"
      >本站涵盖的内容、图片、视频等模板演示数据，部分未能与原作者取得联系。若涉及版权问题，请及时通知我们并提供相关证明材料，我们将支付合理报酬或立即予以删除！</div>
      <div class="text_style">版权声明：本站涵盖的版面设计，html、css、js代码等为权利所有人所有，盗版、翻版必究其法律责任。</div>
      <div class="text_style">
        Powered by
        <span style="font-weight:600;color:#62a8ea">MetInfo 7.3.0</span> ©2008-2021
        <span style="font-weight:600;color:#62a8ea">mituo.cn</span>
      </div> -->
      <!-- <div v-html="companyInfo.description"></div> -->
    </div>
  </div>
</template>
<script>
import { companyInfo } from "../api/api";
export default {
  data() {
    return {
      visible: false,
      visibleQq: false,
      project_list: [
        {
          title: { name: "产品", link: "/product" },
          product: [],
        },
        {
          title: { name: "支持", link: "/afterSale" },
          product: [
            { name: "售后政策", link: "/afterSale" },
            { name: "相关下载", link: "/supportDown" },
          ],
        },
        {
          title: { name: "资讯", link: "/newsProduct" },
          product: [
            { name: "产品资讯", link: "/newsProduct" },
            { name: "行业动态", link: "/newsHangye" },
            { name: "国际资讯", link: "/newsGloub" },
          ],
        },
        {
          title: { name: "关于", link: "/aboutIndex" },
          product: [
            { name: "关于我们", link: "/aboutIndex" },
            { name: "联系我们", link: "/contant" },
            { name: "加入我们", link: "/Join" },
            { name: "意见反馈", link: "/feedback" },
          ],
        },
      ],
      companyInfo: {},
    };
  },
  created() {
    this.getCompanyInfo();
  },
  methods: {
    topath(path) {
    },
    getCompanyInfo() {
      let that = this;
      companyInfo().then((res) => {
        that.companyInfo = res.data;
        that.$store.commit('sethomeInfo',that.companyInfo)
      });
    },
    toNewUrl(){
      window.open('https://www.miit.gov.cn/')
    }
  },
};
</script>>
<style lang="scss">
.footer_model {
  width: 100%;
  padding: 20px 60px;
  display: flex;
  justify-content: space-around;
}
.footer {
  width: 100%;
  border-top: 1px solid #f0f2f5;
  padding: 50px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 14px;
}
.text_style {
  line-height: 1.8;
}
.p_text {
  font-size: 14px;
  line-height: 2;
  cursor: pointer;
  &:hover {
    color: #62a8ea!important;
  }
}
.pp_text{
  &:hover {
    color: #62a8ea!important;
  }
}
</style>